<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/regist.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/plugins/bootstrap-validator/css/bootstrapValidator.min.css">

    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/vue/md5.js"></script>
    <script src="/js/plugins/js-cookie/js.cookie.min.js"></script>
    <script type="text/javascript" src="/js/vue/common.js"></script>
    <script type="text/javascript" src="/js/system/regist.js"></script>
    <!--<script src="js/plugins/bootstrap-validator/js/language/zh_CN.js"></script>-->
    <script src="js/bootstrap/js/bootstrap.js"></script>
    <script src="js/plugins/bootstrap-validator/js/bootstrapValidator.js"></script>
    <script src="js/plugins/messager/jquery.bootstrap.min.js"></script>

    <script>
        $(function () {
            $("#editForm").bootstrapValidator({
                feedbackIcons: { //图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: { //配置要验证的字段
            nickname: {
                validators: { //验证的规则
                    notEmpty: { //必填(规则的名字是规定的)
                        message:"请输入昵称" //错误时的提示信息
                    },
                    remote: { //远程验证
                        type: 'GET', //请求方式
                        url: 'http://localhost:8080/users/checkName', //请求地址
                        message: '昵称已经存在', //验证不通过时的提示信息
                        delay: 1000, //输入内容2秒后发请求
                        data: function() {  //自定义提交参数，默认只会提交当前用户名input的参数
                            return {
                                id: $('input[name="_id"]').val(),
                                name: $('input[name="nickname"]').val()
                            };
                        }
                    },
                }
            },
            password: {
                validators: {
                    notEmpty: { //不能为空
                        message: "密码必填" //错误时的提示信息
                    },
                    stringLength: { //字符串的长度范围
                        min: 1,
                        max: 10
                    }
                }
            },
            rpassword: {
                validators: {
                    notEmpty: { //不能为空
                        message: "密码必填" //错误时的提示信息
                    },
                    identical: {//两个字段的值必须相同
                        field: 'password',
                            message: '两次输入的密码必须相同'
                    },
                }
            }
        }
        }).on('success.form.bv', function () { //表单所有数据验证通过后执行里面的代码
                //提交异步请求
                $("#editForm").ajaxSubmit(function (data) {
                    if (data.success) { //用alert或者popup都可以
                        $.messager.alert("温馨提示", "操作成功!2s后自动关闭")
                        window.setTimeout(function () {
                            window.location.href = "/login.html";
                        }, 2000)
                    } else {
                        $.messager.popup(data.msg)
                    }
                })
            });
        })
    </script>

</head>
<body>
<div class="wrapper">
    <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
            <div class="login-box" id="_j_login_box">
                <div class="inner inner_v2 clearfix">
                    <div class="inner_v2_left">
                        <form id="_j_login_form" action="javascript:;">
                            <div class="form-field">
                                <input id="inputPassword" type="text" placeholder="您的手机号" autocomplete="off"  value="">
                                <div class="err-tip"></div>
                            </div>
                            <div class="submit-btn">
                                <button id="_js_loginBtn">立即注册</button>
                            </div>
                        </form>
                        <div class="agreement">
                            注册视为同意<a target="_blank" href="javascript:;">《骡窝窝用户使用协议》</a>
                        </div>
                        <div class="connect">
                            <p class="hd">用合作网站账户直接登录</p>
                            <div class="bd">
                                <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                                <a href="javascript:;" class="qq"><i></i>QQ</a>
                                <a href="javascript:;" class="weixin"><i></i>微信</a>
                                <div class="clear"></div>
                            </div>
                        </div>                        </div>
                    <div class="inner_v2_right">
                        <img src="/images/qrcode.jpg">
                        <p>扫一扫<br>下载骡窝窝APP</p>
                    </div>
                </div>
            </div>
            <div class="signup-box" style="display: none;">
                <div class="add-info">
                    <div class="hd">账号注册</div>
                    <form  method="post" id="editForm">
                        <input type="hidden" name="phone" value="" id="phone">
                        <div class="form-field m-t-10 form-group">
                            <input name="nickname" type="text" placeholder="您的昵称" >
                            <div class="err-tip"></div>
                        </div>
                        <div class="form-field form-group">
                            <input name="password" type="password" placeholder="您的密码">
                            <div class="err-tip"></div>
                        </div>
                        <div class="form-field form-group">
                            <input name="rpassword" type="password" placeholder="确认密码" >
                            <div class="err-tip"></div>
                        </div>

                        <div class="form-field form-group">
                            <div class="clearfix">
                                <a href="#" class="vcode-send sms-code-send">获取验证码</a>
                                <input name="verifyCode" type="text" placeholder="短信验证码" autocomplete="off"class="vcode-input">
                            </div>
                            <div class="err-tip clearfix"></div>
                        </div>
                        <div class="submit-btn form-group">
                            <button type="submit">完成注册</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fullscreen-bg"
     style="background-image: url('images/27.jpg');">
    <img src="images/27.jpg" style="width: auto; height: 657px; margin-top: -213px;">
</div>

</body>
</html>